<!--
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2020-05-09 14:55:30
 * @LastEditors: sueRimn
 * @LastEditTime: 2020-05-12 10:23:30
 -->
<template>
  <div class="app-group">
    <!-- app分组详细 -->
    <cvue-dialog :dialogVisible="dialogVisible"
      :isShowFoot = "false"
      :title='groupTitle'
      dialogWidth="660px"
      @handleOpen="getDetail"
      @closeDialog="closeDialog"
      @confirmDialog="confirmDialog"
      @handleClose="handleClose">
      <div class="dialog-body" slot="dialogBody">
        <div class="table-body">
          <cvue-table :option="tableOption" :data="tableData" ref="tbl"
            :isShowAdd="false"
            :page="page"
            :layout="layout"
            :tablePage="tablePage"
            :pageSize="page.pageSize"
            :loading="tableLoading"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange">
          </cvue-table>
        </div>
      </div>
    </cvue-dialog>
  </div>
</template>
<script>
import cvueDialog from '@/components/cvue-dialog'
import cvueTable from '@/components/cvue-table'
export default {
  name: 'appGroup',
  components: {
    cvueDialog,
    cvueTable
  },
  data () {
    return {
      tableLoading: false,
      layout: 'total,sizes,prev,pager,next,jumper',
      groupTitle: '',
      groupId: '',
      tablePage: 1,
      page: {
        total: 1, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10, // 每页显示多少条
        pageSizes: [10, 50, 100]
      },
      tableOption: {
        stripe: true,
        maxHeight: '400',
        width: '100%',
        border: true,
        index: false,
        cloumn: [
          {prop: 'index', label: '序号', align: 'center', width: 55},
          {prop: 'name', label: '应用名称', align: 'center', minWidth: 100},
          {prop: 'pcodeName', label: '分类', align: 'center', minWidth: 100}
        ]
      },
      tableData: [
      ]
    }
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // 触发事件
    handleClose () {
      this.$emit('handleClose')
    },
    closeDialog () {
      this.$emit('closeDialog')
    },
    confirmDialog () {
      this.$emit('confirmDialog')
    },
    // 改变pagesize
    handleSizeChange (val) {
      this.tablePage = 1
      this.page.pageSize = val
      this.getDetail()
    },
    // 改变页码
    handleCurrentChange (val) {
      this.tablePage = val
      this.getDetail()
    },
    // 获取应用分组详情
    getDetail () {
      this.tableData = []
      this.groupTitle = this.$parent.gTitle
      this.groupId = this.$parent.gId
      var params = {
        groupId: this.groupId
      }
      this.tableLoading = true
      this.$store.dispatch('commonUser/GetAppGroup', params).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.tableData = res.data
          // this.page.total = res.data.total
          // this.page.currentPage = this.tablePage
          this.tableLoading = false
        } else {
          this.$message({
            message: res.msg,
            duration: 2000,
            type: 'error'
          })
          this.tableLoading = false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.app-group{
  .el-form-item{
    margin-bottom: 0px;
  }
  .table-body{
    margin-top: 0px;
    .controlled-span {
      display: inline-block;
    }
  }
  .el-dialog__body {
    padding: 0;
    height: 500px;
    overflow: scroll;
  }
}
</style>
<style>
/* .app-group .el-dialog__body {
  padding: 0;
  max-height: 500px;
  overflow: scroll;
} */
</style>
